<template>
  <div id="warningLogTable">
    <div class='logStatistics-header'>
      <div class="logStatistics-header-left">
        <div class="time">
          <span>告警时间：</span>
          <date-range-picker v-model:value="selectTimeRange" :valueFormat="valueFormat" :showTime="true"
            :disabledInfo="disabledInfo" @change="fetchLogList()"></date-range-picker>
        </div>
      </div>
      <div class="searchName">
        <a-input v-model:value="warningModuleName" placeholder="请输入告警模块名称" style="width: 192px;height:32px">
          <template #suffix>
            <i class="iconfont icon-search" @click="fetchLogList()"></i>
          </template>
        </a-input>
      </div>
    </div>
    <!-- 告警log table表格 -->
    <baseTable :columns="columns.warningLogColumns" :dataSource="configData.records"
      :isShowPagination="isShowPagination" :total="configData.total" @changePage="changePage" :isSelect="true"
      :scroll="scroll" :rowSelection="1">
      <template #bodyCell="{ column, text, record }">
        <div v-for="item in ['logType', 'logLevel', 'subEventType', 'createTime']">
          <template v-if="column.dataIndex === item">
            <span v-text="getRecordValue(column.dataIndex, record)"></span>
          </template>
        </div>
      </template>
    </baseTable>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/systemConfig/columnsName";
import { scrollType, configDataType, modeProp } from '@/type.d';
import request from '@/api/index';
import { getTableScroll } from "@/components/table/tableConfig/table";
import dateRangePicker from "@/components/picker/dateRangePicker.vue"
// TS
interface dataSourceType {
  [propName: string]: any;
}
//data
//头部搜索部分
const warningModuleName = ref('');
const valueFormat = ref('YYYY-MM-DD HH:mm:ss');
const selectTimeRange = ref<(string | number)[]>([]);//选择时间范围
const disabledInfo = reactive({//日期禁选
  type: 2,
  startDays: 0,
});
//表格配置部分
const isShowPagination = true; // 是否需要配分页器

const reqTelListOption = ref({//控制分页数据请求的变量集合
  pageNumber: 0,
  pageSize: 10,
  tplType: 1
})
let scroll: scrollType = reactive({ y: '', isFixed: false })
//工作流表格数据
let configData = ref<configDataType>({ total: 0, size: 10, records: [] });

//methods
//获取工作流的分页列表数据展示
const fetchLogList = (data: dataSourceType = {}) => {
  nextTick(() => {
    let params = {
      type: 5,
      pageNumber: data ? 0 : reqTelListOption.value.pageNumber,
      pageSize: data ? 10 : reqTelListOption.value.pageSize,
      endDate: selectTimeRange.value[1] || null,
      beginDate: selectTimeRange.value[0] || null,
      subEventType: warningModuleName.value,

    }
    request.fetchStatisticsSysLogsList(params).then((res: dataSourceType) => {
      let reqData = res;
      configData.value.total = reqData.total;
      configData.value.size = reqData.size;
      reqData.records.forEach((item: dataSourceType) => {
        item.uri = `[${item.method}]${item.uri}`
      })
      configData.value.records = reqData.records || [];
      nextTick(() => {
        scroll.y = getTableScroll(130, "warningLogTable").y;
        scroll.isFixed = getTableScroll(130, "warningLogTable").isFixed;
      });
    });
  })
}
// 将record中的数字转化成文案
const getRecordValue = (key: string, record: dataSourceType) => {
  if (key == 'logType') { // '1:信息 2:警告'
    return record[key] == '1' ? '信息' : '警告'
  } else if (key == 'logLevel') {//日志级别(1:高 2:中 3:低)
    return record[key] == '1' ? '高' : record[key] == '2' ? '中' : '低'
  } else {
    return record[key]
  }
}
// 获取分页的改变
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let { pageCurrent, pageSize } = data;
  reqTelListOption.value.pageNumber = pageCurrent;
  reqTelListOption.value.pageSize = pageSize;
  fetchLogList();
};
//mounted
onMounted(() => {
  fetchLogList()
})
</script>

<style lang="less" scoped>
#warningLogTable {
  background-color: #fff;
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;

  .logStatistics-header {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: space-between;

    .logStatistics-header-left {
      display: flex;
      align-items: center;
    }

    .time {
      margin-right: 16px;
      font-size: 14px;
    }

    .searchName {
      font-size: 14px;
      color: #333;
      margin-left: 16px;
    }
  }

}
</style>
<style lang="less">
#warningLogTable .ant-table-thead .ant-table-cell:nth-last-of-type(1) {
  text-align: left;
  margin-right: 16px;
}

#warningLogTable .ant-table-wrapper table>thead>tr>th:nth-child(1) {
  padding-left: 16px;
}

#warningLogTable .ant-table-wrapper table>tbody>tr>td:nth-child(1) {
  padding-left: 16px;
  padding-right: 16px;
}
</style>